<template>
	<section>
			<el-row :gutter="5" >
				<el-col :span="showParams?23:24">
					<el-row :class="{'row-box':true,'cfg':isRptCfg}">
						<div class="title">{{ title?title:(isRptCfg?'标题':'') }}</div>
						<el-input class="input" v-model="title" placeholder="标题"/>
					</el-row>
					<el-row :class="{'row-box':true,'cfg':isRptCfg}">
						<div class="remark">{{ remark?remark:(isRptCfg?'详细说明':'') }}</div>
						<el-input class="input" v-model="remark" placeholder="说明"/>
					</el-row>
					<el-row>
						<div class="echart-box" :id="this.id"></div>
					</el-row>
				</el-col>
				<el-col :span="showParams?1:0" v-if="showParams">
					 <el-popover   trigger="manual" v-model="filterVisible" style="float:right;" width="500">
						<el-button slot="reference" style="margin-top:10px;margin-right:10px;z-index: 99999;" icon="el-icon-more" @click="filterVisible=!filterVisible"></el-button>
						<el-row>
							<el-button type="danger" icon="el-icon-delete" @click="$emit('delete',cfg)">从报告移出该报表</el-button>
							<el-button icon="el-icon-close" style="float:right;" @click="filterVisible=false">关闭</el-button>
						</el-row>
						<el-row>
							<el-form :model="params" class="padding"   :style="{width:'100%',overflow: 'auto'}" ref="filtersRef">
								<el-row>
									<el-col :span="15">
										<el-form-item label="分组属性">
											<el-select style="width:100px;" size="small"   v-model="params.groupBy"  @change="onXmQuestionSomeFieldsChange('groupBy',$event)">
													<el-option v-for="i in this.groupBys" :label="i.name" :key="i.id" :value="i.id"></el-option>
												</el-select>
											</el-form-item>

											<el-form-item label="测试库" v-if="xmTestCasedb && xmTestCasedb.id" >
												<span >{{xmTestCasedb.id}} <span v-if="xmTestCasedb.name"><br/>{{  xmTestCasedb.name  }} </span> </span>
											</el-form-item>

											<el-form-item label="归属项目">
												<xm-project-select show-style="tag"  v-if="!xmProject"  ref="xmProjectSelect" style="display:inline;"  :auto-select="false" :link-product-id="xmProductCpd?xmProductCpd.id:null" @change2="onProjectSelected"  @clear="onProjectClear"></xm-project-select>
												<span v-else>{{xmProject.id}} <span v-if="xmProject.name"><br/>{{  xmProject.name  }} </span> </span>
											</el-form-item>
											<el-form-item label="归属产品"  >
												<xm-product-select show-style="tag" v-if="!xmProductCpd || !xmProductCpd.id"  ref="xmProductSelect" style="display:inline;"  :auto-select="false" :link-project-id="xmProject?xmProject.id:null" @change2="onProductSelected"  :iterationId="xmIteration?xmIteration.id:null"  @clear="onProductClear"></xm-product-select>
												<span v-else>{{xmProductCpd.id}} <span v-if="xmProductCpd.productName"><br/>{{  xmProductCpd.productName  }} </span> </span>
											</el-form-item>
											<el-form-item label="归属迭代" v-if="xmIteration && xmIteration.id">
												<span>  {{xmIteration.id}}
													<span v-if="xmIteration.iterationName"><br/>{{ xmIteration.iterationName  }} </span>
												</span>
											</el-form-item>
											<el-form-item label="归属迭代" v-else-if="filters.product && filters.product.id">
												<xm-iteration-select show-style="tag"  ref="xmIterationSelect"  :auto-select="false"  :product-id="filters.product?filters.product.id:null" :link-project-id="xmProject?xmProject.id:null"   placeholder="迭代"  @change2="onIterationSelected" @clear="onIterationClear"></xm-iteration-select>
											</el-form-item>
											<el-form-item label="测试计划" v-if="xmTestPlan && xmTestPlan.id">
												<span>  {{xmTestPlan.id}}
													<span v-if="xmTestPlan.name"><br/>{{ xmTestPlan.name  }} </span>
												</span>
											</el-form-item>
											<el-form-item label="测试计划" v-else-if="filters.product && filters.product.id">
												<span v-if="filters.testPlan">{{ filters.testPlan.name }}</span>
												<el-button v-if="filters.testPlan" type="text" @click="filters.testPlan=null" plain icon="el-icon-circle-close">清除</el-button>
												<el-button v-if="!filters.testPlan" type="text" @click="$refs['xmTestPlanSelectRef'].open()" plain>选择计划</el-button>
											</el-form-item>
									</el-col>
									<el-col :span="9">
										<el-form-item label="缺陷状态" prop="bugStatus">
											<mdp-select item-code="bugStatus" style="width:100px;" size="small"   v-model="params.bugStatus"  @change="onXmQuestionSomeFieldsChange('bugStatus',$event)" clearable>
 											</mdp-select>
										</el-form-item>
										<el-form-item  label="缺陷类型" prop="bugType" >
											<mdp-select item-code="bugType" style="width:100px;" size="small" v-model="params.bugType"  @change="onXmQuestionSomeFieldsChange('bugType',$event)" clearable>
 											</mdp-select>
										</el-form-item>
										<el-form-item  label="缺陷原因" prop="bugReason">
											<mdp-select item-code="bugReason" style="width:100px;" size="small" v-model="params.bugReason"  @change="onXmQuestionSomeFieldsChange('bugReason',$event)" clearable>
 											</mdp-select>
										</el-form-item>
										<el-form-item  label="严重程度" prop="bugSeverity" >
											<mdp-select item-code="bugSeverity" style="width:100px;" size="small" v-model="params.bugSeverity"  @change="onXmQuestionSomeFieldsChange('bugSeverity',$event)" clearable>
 											</mdp-select>
										</el-form-item>
										<el-form-item  label="优先级别" prop="priority" >
											<mdp-select item-code="priority" style="width:100px;" size="small" v-model="params.priority" @change="onXmQuestionSomeFieldsChange('priority',$event)" clearable>
 											</mdp-select>
										</el-form-item>
										<el-form-item  label="解决方案" prop="solution" >
											<mdp-select item-code="bugSolution" style="width:100px;" size="small" v-model="params.solution" @change="onXmQuestionSomeFieldsChange('solution',$event)" clearable>
 											</mdp-select>
										</el-form-item>

										<el-form-item  label="重现频率" prop="repRate" >
											<mdp-select item-code="bugRepRate" style="width:100px;" size="small" v-model="params.repRate" @change="onXmQuestionSomeFieldsChange('repRate',$event)" clearable>
 											</mdp-select>
										</el-form-item>
									</el-col>
								</el-row>


								<el-form-item>
									<el-button type="primary"  style="float:right;" icon="el-icon-search" @click="searchXmQuestionAttDist">查询</el-button>
								</el-form-item>
							</el-form>
						</el-row>
					 </el-popover>

				</el-col>
			</el-row>
			<xm-test-plan-select  ref="xmTestPlanSelectRef" :casedb-id="xmTestCasedb?xmTestCasedb.id:null" :product-id="xmProduct?xmProduct.id:null" :project-id="xmProject?xmProject.id:null"   placeholder="迭代"  @select="onXmTestPlanSelected" @clear="onXmTestPlanClear"></xm-test-plan-select >

	</section>
</template>

<script>
	import util from '@/common/js/util';//全局公共库

	import { mapGetters } from 'vuex'

	import { getXmQuestionAttDist } from '@/api/xm/core/xmQuestion';

	import  XmProjectSelect from '@/views/xm/core/components/XmProjectSelect';//项目选择
	import  XmProductSelect from '@/views/xm/core/components/XmProductSelect';//产品选择界面
	import  XmIterationSelect from '@/views/xm/core/components/XmIterationSelect';//迭代选择界面
	import  xmTestPlanSelect from '@/views/xm/core/xmTestPlan/XmTestPlanSelect';//计划选择器

	export default {

		components: {
			XmProjectSelect,XmIterationSelect,XmProductSelect,xmTestPlanSelect,
		},
        props:['id','cfg','category','showToolBar','showParams','isRptCfg','rptDatas','xmProject','xmProduct','xmIteration','xmTestCasedb','xmTestPlan',],
		computed: {
		    ...mapGetters([
		      'userInfo','roles'
		    ]),
			rawDatasCpd(){
				if(!this.rawDatas || this.rawDatas.length==0){
					return []
				}else{
					var itemId="";
					if(this.params.groupBy=='bug_status'){
						itemId="bugStatus"
					}else if(this.params.groupBy=='bug_type'){
						itemId="bugType"
					}else if(this.params.groupBy=='bug_reason'){
						itemId="bugReason"
					}else if(this.params.groupBy=='bug_severity'){
						itemId="bugSeverity"
					}else if(this.params.groupBy=='priority'){
						itemId="priority"
					} else if(this.params.groupBy=='solution'){
						itemId="bugSolution"
					} else if(this.params.groupBy=='rep_rate'){
						itemId="bugRepRate"
					}
					return this.rawDatas.map(i=>{
						var data={...i}
						data.name=this.formatDict(itemId,data.name)
						return data;
					})
				}
			},

			total(){
				if(!this.rawDatas || this.rawDatas.length==0){
					return 0
				}else{
					return this.rawDatas.reduce((n, i) => {
						return (n += i.value);
					}, 0)
				}
			},
			legendCpd(){
				var itemId="";
				if(this.params.groupBy=='bug_status'){
					itemId="bugStatus"
				}else if(this.params.groupBy=='bug_type'){
					itemId="bugType"
				}else if(this.params.groupBy=='bug_reason'){
					itemId="bugReason"
				}else if(this.params.groupBy=='bug_severity'){
					itemId="bugSeverity"
				}else if(this.params.groupBy=='priority'){
					itemId="priority"
				} else if(this.params.groupBy=='solution'){
					itemId="bugSolution"
				} else if(this.params.groupBy=='rep_rate'){
					itemId="bugRepRate"
				}

				return this.dicts[itemId].map(i=>i.name)
			},
			titleCpd(){

				var preName=""
				if(this.filters.testPlan && this.filters.testPlan.id){
					preName=`测试计划【${this.filters.testPlan.name}】`
				}else if(this.filters.testCasedb && this.filters.testCasedb.id){
					preName=`测试库【${this.filters.testCasedb.name}】`
				}else if(this.filters.iteration && this.filters.iteration.id){
					preName=`迭代【${this.filters.iteration.iterationName}】`
				}else if(this.filters.project && this.filters.project.id){
					if(this.filters.project.name){
						preName=`项目【${this.filters.project.name}】`
					}else{
						preName=`项目【${this.filters.project.id}】`
					}
				}else if(this.filters.product && this.filters.product.id){
					if(this.filters.product.productName){
						preName=`产品【${this.filters.product.productName}】`
					}else{
						preName=`产品【${this.filters.product.id}】`
					}

				}
				return  preName+'缺陷属性数量分布'

			},
			xmProductCpd(){
				if(this.xmIteration && this.xmIteration.id){
					return {id:this.xmIteration.productId,productName:this.xmIteration.productName}
				}
				if(this.xmProduct && this.xmProduct.id){
					return this.xmProduct
				}
				return null;
			}

        },
		watch: {
			rawDatasCpd(){
				this.drawCharts();
			}
	    },
		data() {
			return {

                filterVisible:false,
				filters:{
                    product:null,
                    project:null,
					testPlan:null,
					iteration:null,
					testCasedb:null,
                },
				params:{
					groupBy:'bug_status',
				},
				title:'',//报表配置项
				remark:'', //报表配置项
				groupBys:[
					{id:'bug_status', name:'缺陷状态'},
					{id:'bug_type', name:'缺陷类型'},
					{id:'bug_reason', name:'缺陷原因'},
					{id:'bug_severity', name:'紧急程度'},
					{id:'priority', name:'优先级别'},
					{id:'solution', name:'解决方案'},
					{id:'rep_rate', name:'复现频率'},

				],
				dicts:{
					'bugSeverity':[],'bugSolution':[],'bugStatus':[],'bugType':[],'priority':[],'bugRepRate':[],'bugReason':[]
				},//下拉选择框的所有静态数据  params=[{categoryId:'0001',itemCode:'sex'}] 返回结果 {'sex':[{optionValue:'1',optionName:'男',seqOrder:'1',fp:'',isDefault:'0'},{optionValue:'2',optionName:'女',seqOrder:'2',fp:'',isDefault:'0'}]}
				load:{ list: false, edit: false, del: false, add: false },//查询中...
				dateRanger:[],
                maxTableHeight:300,
                visible:false,
				rawDatas:[],

			}//end return
		},//end data
		methods: {
			formatDict(itemId,val){
				var dict=this.dicts[itemId]
				if(dict){
					var item=dict.find(i=>i.id==val)
					if(item){
						return item.name
					}
				}
				return val;
			},
			 findMax( list ) {
				var i, max = list[0];

				if(list.length < 2) return max;

				for (i = 0; i < list.length; i++) {
					if (list[i].distBudgetWorkload > max.distBudgetWorkload) {
						max = list[i];
					}
				}
				return max;
			},
			open(){
				this.visible=true;
				this.filters.testPlan=this.xmTestPlan
				this.filters.product=this.xmProduct
				this.filters.project=this.xmProject
				this.filters.iteration=this.xmIteration
				this.filters.testCasedb=this.xmTestCasedb

				if( this.filters.testPlan && this.filters.testPlan.id){
					this.params.planId= this.filters.testPlan.id
				}

				if( this.filters.product && this.filters.product.id){
					this.params.productId= this.filters.product.id
				}

				if( this.filters.project && this.filters.project.id){
					this.params.projectId= this.filters.project.id
				}

				if( this.filters.iteration && this.filters.iteration.id){
					this.params.iterationId= this.filters.iteration.id
				}


				if( this.filters.testCasedb && this.filters.testCasedb.id){
					this.params.casedbId= this.filters.testCasedb.id
				}
				if(this.initGroupBy){
					this.params.groupBy=this.initGroupBy
				}
				if(this.cfg && this.cfg.id){
					this.params=this.cfg.params
					this.title=this.cfg.title
					this.remark=this.cfg.remark
				}
				if(this.showToolBar && !this.title){
					this.title="企业工作项每日趋势图"
				}
				this.searchXmQuestionAttDist()
			},
			drawCharts() {
				this.myChart = this.$echarts.init(document.getElementById(this.id));
				this.myChart.setOption(
					{

						title: {
							text: this.titleCpd,
							left: 'center'
						},
						tooltip: {
							trigger: 'item',

						},

						toolbox: {
							show: true,
							top:"5%",
							right:"10px",
							feature: {
								dataView: { show: true, readOnly: false },
								saveAsImage: { show: true },
							}
						},
						calculable: true,

						legend: {
							bottom: 'bottom',
							data:this.legendCpd,
						},
						graphic: {
							type: 'text',
							left: 'center',
							top: 'center',
							style: {
							// text: '总数',
							text:
								'缺陷数'+this.total ,

							textAlign: 'center',
							fill: '#333',
							width: 30,
							height: 30,
							fontSize: 14
							}
						},
						series: [
							{
							type: 'pie',
							radius: ['50%','70%'],
							data: this.rawDatasCpd,
							emphasis: {
								itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},

							label: {
								show: true,
								formatter:'{b}: {c}  ({d}%)'
							},
							}
						]
					}
				)
			},
			onXmQuestionSomeFieldsChange(fieldName,$event){

			},
			searchXmQuestionAttDist(){
				if(this.rptDatas){
					this.rawDatas=this.rptDatas
					return;
				}

				var params={...this.params}
				if(!params.groupBy){
					this.$notify({position:'bottom-left',showClose:true,message:'请选中分组属性',type:'warning'})
					return
				}
				getXmQuestionAttDist(params).then(res=>{
					this.rawDatas=res.data.data
				})

			},
			onProjectSelected(project){
				this.filters.project=project
			},

			onProjectClear(){
				this.filters.project=null

			},
			onProductSelected(product){
				this.filters.product=product
			},

			onProductClear(){
				this.filters.product=null

			},

			onIterationSelected(iteration){
				this.filters.iteration=iteration
			},

			onIterationClear(){
				this.filters.iteration=null
			},

			onXmTestPlanSelected(xmTestPlan){
				this.filters.testPlan=xmTestPlan
			},

			onXmTestPlanClear(){
				this.filters.testPlan=null
			},
		},//end method
		mounted() {  

			this.$mdp.ajaxGetDictOptions('bugSeverity').then(res=>{
				this.dicts['bugSeverity']=res.data.options
			})
			
			this.$mdp.ajaxGetDictOptions('bugSolution').then(res=>{
				this.dicts['bugSolution']=res.data.options
			})
			
			this.$mdp.ajaxGetDictOptions('bugStatus').then(res=>{
				this.dicts['bugStatus']=res.data.options
			})
			
			this.$mdp.ajaxGetDictOptions('bugType').then(res=>{
				this.dicts['bugType']=res.data.options
			})
			
			this.$mdp.ajaxGetDictOptions('priority').then(res=>{
				this.dicts['priority']=res.data.options
			})
			
			this.$mdp.ajaxGetDictOptions('bugRepRate').then(res=>{
				this.dicts['bugRepRate']=res.data.options
			})
			
			this.$mdp.ajaxGetDictOptions('bugReason').then(res=>{
				this.dicts['bugReason']=res.data.options
			}) 
			this.open();

		}//end mounted
	}

</script>

<style scoped>
   .image {
    width: 100%;
    display: block;
  }
</style>
